<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript">
    </script>
</head>

<body>

    <div id="app">

        <cp1></cp1>
        <cp2></cp2>


    </div>



    <script>
        // 添加比较的数据，97行代码就是根据这个数组有没有自定义的属性相同的名字，进行类比
        const pageAuth = ['edit', 'add']
        const pageShowDown = ['showDownYou']

        //    Vue.directive(指令名称,指令的钩子)  全局注册 指令

        Vue.directive('happy', {

            bind(el, binding, vnode, oldVnode) {
                el.innerText = '我很开心！！！'
            }

        })


        Vue.component('cp2', {
            template: `<div>
                        我是cp2
                          <div v-happy></div>      
                      </div>`,
        })



        Vue.component('cp1', {
            template: `<div>
                        我是cp1
                          <div v-text="'abc'"> </div>  
                          <div v-abc:kfc="8"> 123 </div>   
                          <div v-happy></div>   
                          <button v-auth:add>添加</button>
                          <button v-auth:edit>编辑</button>
                          <button v-auth:delete>删除</button>
                          <button @click="jksn002" v-getVal:name="'你好'">点击获取标签</button>

                          <button v-shouDown:showDownYou>没有了</button>
                      </div>`,
            data() {
                return {
                    happyTxt: '',
                    kjsn: "贼k少铝",
                    val:''
                }
            },
            directives: {
                //  指令名称: { 指令的钩子函数 }   
                abc: {
                    bind(el, binding, vnode, oldVnode) {
                        //vnode ： Vue 编译生成的虚拟节点+.context，可以获取绑定自定义指令的节点
                        //`oldVnode`：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用
                        // console.log('el',el)
                        console.log('binding', binding)
                        console.log("----------------------------------------------")
                        // 自定义指令的钩子当中 this指向window 不指向组件实例自身

                        console.log('this in 自定义指令', this)
                        // 所以只能通过 vnode.context来访问当中组件实例自身
                        console.log(vnode.context.kjsn)
                        console.log(vnode.context)
                        console.log("变化之前的数据", oldVnode.context)
                    }
                },

                auth: {
                    inserted(el, binding) {
                        // arg 就是自定义属性 :右边的字符
                        const {
                            arg
                        } = binding
                        console.log('el', el)
                        console.log('binding', binding)
                        //  const pageAuth = ['edit','add']
                        // console.log("看看布尔值", pageAuth.includes(arg))
                        if (!pageAuth.includes(arg)) el.remove();

                    }
                  
                },
                getVal: {
                    // 获取节点
                    bind(el,binding) {
                       let takeValue = async ()=>{
                        console.log('11111111111111', 11111111111111)
                        el.innerText = "更改了"
                        }
                        
                    //    this.val =  "更改了"
                    // el.innerText = "更改了"
                        console.log("拿到标签了=>",el)
                        console.log("拿到标签了=>",binding.value)
                        // binding.value = '我很是不太好' 
                        // console.log("拿到标签了=>",binding.value)
                        console.log("拿到标签了=>",binding.oldValue)

                    }

                },
                // 点击删除标签
                shouDown:{
                    inserted(el , binding){
                        const { arg } = binding
                        if (!pageAuth.includes(arg)) el.remove();
                    }
                }
            },
            methods: {
                jksn002() {
                    // el.innerText
                    console.log('this.val', this.val)
                    // this.kjsn = this.val
                   
                    return this.jksn = 123
                }
            }


        })


        const app = new Vue({
            el: '#app'
        })
    </script>

</body>

</html>